<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Images | MI Tagger</title>
    <link rel="shortcut icon" href="/static/img/favicon.png">
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/images.css">
    <!-- Java Script -->
    <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
</head>
<body>
    <div id="load">Upload Data</div>
    <div id="header">
        <h1>
            <span style="color: #2aabe2">M</span><span style="color: #ed1b24">I</span>
            <span style="color: #3ab54b">T</span><span style="color: #f6931b">a</span><!--
         --><span style="color: #0072bb">g</span><span style="color: #0171b9">g</span><!--
         --><span style="color: #ed1e79">e</span><span style="color: #2face2">r</span>
        </h1>
    </div> <!-- #header -->
    <div id="choice">
        <div id="file1" class="file-name">
            Image File Name<input type="checkbox" id="box1" class="box" /><br />
        </div>
        <div class="line"></div>
        <div id="file2" class="file-name">
            Image File Name<input type="checkbox" id="box2" class="box" /><br />
        </div>
        <div class="line"></div>
        <div id="file3" class="file-name">
            Image File Name<input type="checkbox" id="box3" class="box" /><br />
        </div>
        <div class="line"></div>
        <div id="file4" class="file-name">
            Image File Name<input type="checkbox" id="box4" class="box" /><br />
        </div>
        <div class="line"></div>
        <div id="file5" class="file-name">
            Image File Name<input type="checkbox" id="box5" class="box" /><br />
        </div>
        <div class="line"></div>
    </div> <!-- #choice -->
    <div id="but">
            <button id="commit-but" type="button" class="btn btn-primary">Tag Images</button>
    </div> <!-- #but -->
</body>
<script type="text/javascript">
    $(".box").click(function() {
        var num = $(this).attr("id");
        var file = "#file" + num[3];

        if (!$(this).attr("checked")) {
            $(file).css({"background": "gray"});
            $(this).attr("checked", true);
        } else {
            $(file).css({"background": "#eaeaea"});
            $(this).attr("checked", false);
        }
    });
</script>
</html>

